<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var randomX = d3.randomNormal(width / 2, 80),
    randomY = d3.randomNormal(height / 2, 80),
    data = d3.range(2000).map(function() { return [randomX(), randomY()]; });


var circle = svg.selectAll("circle")
  .data(data)
  .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", transform(d3.zoomIdentity));
console.debug(d3.zoomIdentity)

svg
.call(d3.zoom()
        .scaleExtent([1, 8]).translateExtent([[0,0],[width,height]])
        .on("zoom", zoom)).append("rect")
    .attr("fill", "none")
    .attr("pointer-events", "all")
    .attr("width", width)
    .attr("height", height)
    

function zoom() {
	console.debug(d3.event.transform);
  circle.attr("transform", transform(d3.event.transform));
  
}

function transform(t) {
  return function(d) {
  	//console.debug(t.apply(d))
    return "translate(" + t.apply(d) + ")";
  };
}


</script>